<template>
  <div id="cycle">1</div>
  <span class="color">选择数据&nbsp;------</span>
  <div id="cycle1">2</div>
  <span class="color">上传</span>
  <br><br><br>
  <span class="color m">上传</span>

  <input type="file" @change="handleFileUpload">
  <br><br><br>
  
</template>  
    
<script>
export default {
  name: "fileUpload",
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];

      
      if (file.size > 500 * 1024 * 1024) {
        alert('文件大小不能超过500MB');
        return;
      }

  
      const allowedExtensions = /(\.csv|\.tsv|\.txt)$/i;
      if (!allowedExtensions.exec(file.name)) {
        alert('只支持CSV、TSV和TXT格式的文件');
        return;
      }

      this.uploadFile(file);
    }
  }
}
</script>
<style scoped>
input {
  color: darkgrey;
}

#but {
  margin: 20px 60px 0 80px;
}

#but1 {
  width: 60px;
}

.m {
  margin: 40px 100px 0 48px;
}

#cycle {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid rgb(43, 192, 226);
  border-radius: 50%;
  background-color: rgb(43, 192, 226);
  font-size: small;
  line-height: 15px;
  text-align: center;
  color: aliceblue;
  margin: 10px 5px 0 30px;
}

#cycle1 {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid darkgrey;
  border-radius: 50%;
  background-color: darkgrey;
  font-size: small;
  line-height: 15px;
  text-align: center;
  color: aliceblue;
  margin: 0 5px 0 5px;
}</style>